<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>

		<!-- 	生命周期:
		1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
		2.是什么:Vue在关健时刻帮我们调用的一些特殊名称的函数。
		3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
		4.生命周期函数中的this指向是vm 或组件实例对象。 -->
		<div id="app">
			<h2 :style="{opacity}">小光同志</h2>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						opacity: 1
					}
				},
				methods: {
					set() {
						var a = "-"
						//通过外部的定时器实现（不推荐)
						setInterval(() => {
							if (this.opacity <= 0) {
								a = "+"
							} else if (this.opacity == 1) {
								a = "-"
							}
							if(a=="+"){
								 this.opacity += 0.005
							}else{
								this.opacity -= 0.005
							}
							console.log(this.opacity)
						}, 1000/120)
					}
				},
				//Vue完成模板的解析并把真实的DOM元素放入页面后（挂载完毕）调用mounted
				mounted() {
					this.set()
				}
			});

			// var a = "-"
			// //通过外部的定时器实现（不推荐)
			// setInterval(() => {
			// 	if (app.opacity <= 0) {
			// 		a = "+"
			// 	} else if (app.opacity == 1) {
			// 		a = "-"
			// 	}
			// 	if(a=="+"){
			// 		 app.opacity += 0.01
			// 	}else{
			// 		app.opacity -= 0.01
			// 	}
			// }, 10)
		</script>
	</body>
</html>
